<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %><%@
include file="/WEB-INF/jspf/import.jspf" %><%--
--%><!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title>车友会-申请加入 </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="lijun_gz none" />
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/cyh.css">
    </head>
    <body class="g-doc" style="background:#fff">
        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7378" />
        </jsp:include>
         <%@include file="../common/intf6007.html" %>
        <!-- 公共头部 -->
        <div class="g-hd">
            <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
            <div class="header-title">
                <span class="header-title-nav">
                    <a href="${WAPROOT}/">车友会</a>&nbsp;&gt;
                    <c:if test="${fn:length(club.name) >= 8}">
                        <a href="${WAPROOT}/${myUrl}/"> ${fn:substring(club.name, 0, 8)}...</a>
                    </c:if>
                    <c:if test="${fn:length(club.name) < 8}">
                        <a href="${WAPROOT}/${myUrl}/"> ${club.name}</a>
                    </c:if>
                    &gt; 申请加入
                </span>
            </div>
        </div>

        <div class="m-section"><span class="m-section-mark">个人信息</span></div>
        <div class="m-form">
            <form action="${WAPROOT}/member/apply.do" id="applyform" method="POST">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <th>真实姓名：</th>
                        <td>
                            <span class="u-txt">
                                <input type="text" id="cName" onblur="checkName(this.value)" placeholder="请在此输入姓名...">
                            </span>
                            <p class="m-postMessage-warn" id="usernameTip" style="display: none;">请输入合法的姓名</p>
                        </td>
                    </tr>
                    <tr>
                        <th>性别：</th>
                        <td>
                            <label><input type="radio" name="gender" value="0" id="man" checked>男</label>&nbsp;&nbsp;&nbsp;
                            <label><input type="radio" name="gender" value="1" id="woman">女</label>
                        </td>
                    </tr>
                    <tr>
                        <th>地区：</th>
                        <td>
                            <p>
                                <select name="shi" id="shi" class="u-sel"><option value="0" selected>-选择地区-</option></select>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <th>联系电话：</th>
                        <td>
                            <span class="u-txt">
                                <input type="number" id="mobile" placeholder="请在此输入联系方式..." onblur="checkPhone(this.value);">
                            </span>
                            <p class="m-postMessage-warn" id="moblieTip" style="display: none;">请输入正确的手机号</p>
                        </td>
                    </tr>
                    <tr>
                        <th>爱车信息：</th>
                        <td>
                            <p>
                                <select name="brandId" id="bid" class="u-sel">
                                    <option value="0">品牌</option>
                                </select> 
                                <select name="serialId" id="sid" class="u-sel" >
                                    <option value="0">车系</option>
                                </select>
                                <input type="hidden" name="brandName" id="brandName" value=""/>
                                <input type="hidden" name="serialName" id="serialName" value=""/>
                            </p>
                        </td>
                    </tr>
                </table>
            </form>
            <div class="m-btnArea">
                <a href="javascript:void(0);" class="u-btnA" id="d-apply">申请加入</a>
            </div>
            <div class="m-zhuyi">
                <p>注意事项</p>
                1.申请加入车友会,填写个人真实信息<br/>
                2.车友会进行审核，审核通过<br/>
                3.个人信息不对外公开，仅车友会会长可见
            </div>
        </div>

        <div id="Jfoot" class="g-footer">
            <!-- 公共底部 -->
              <%@include file="../common/intf5987.html" %>
        </div>
        <script type="text/javascript" src="http://js.3conline.com/wap/2013/common/js/zepto1.1.min.js"></script>
        <script src="http://js.3conline.com/min/temp/v1/dpl-faker,dpl-related_select.js"></script>
        <%-- <script type="text/javascript" src="${ROOT}/template/wap/club/city.js"></script> --%>
        <script type="text/javascript">
            var clubId = '${club.clubId}';
            
            //新版加载省份城市js
	        $.getScript("${cfg.ucRoot}/intf/area.jsp?tag=shi&selected=0&defaultCityTips=1&className=u-sel");
            
            /*各种提示*/
            function showTips(msg){
                var tips = document.getElementById('Jtips');
                if(!tips) {
                    tips = document.createElement('div');
                    tips.id = 'Jtips';
                    tips.className = 'm-tips';
                    document.body.appendChild(tips);
                }
                tips.innerHTML = msg;
                tips.style.display = 'block';
                var tips_width = tips.clientWidth/2;
                tips.style.marginLeft = '-'+tips_width+'px';
                tips.style.opacity = 1;    
                setTimeout(function(){
                    tips.style.webkitTransition = 'all 0.3s ease-in';
                    tips.style.opacity = 0;
                    tips.style.marginTop = '-80px';
                    setTimeout(function(){
                        tips.style.display = 'none';
                        tips.style.marginTop = '-40px';
                    }, 300);
                }, 3000);
            }
	
            // 姓名校验
            function checkName(name) {
                $("#cName").val($.trim($("#cName").val()));
                if (name.length > 255) {
                    $('#usernameTip').css('display', 'block');
                    return true;
                }
                $('#usernameTip').css('display', 'none');
                return false;
            }
	
            // 电话校验
            function checkPhone(phone) {
                if (phone.length == 0) {
                    $('#moblieTip').css('display', 'none');
                    return false;
                }
                if (/^(13|14|15|18|17)[0-9]{9}$/.test(phone)) {
                    $('#moblieTip').css('display', 'none');
                    return false;
                } else {
                    $('#moblieTip').css('display', 'block');
                    return true;
                }
            }
	
            // 提交申请
            $('#d-apply').click(function() {
                var truename = $('#cName').val();
                var phone = $('#mobile').val();
                if (checkName(truename) || checkPhone(phone)) {
                    return false;
                } 

                var bid = $('#bid').val();
                if(bid&&bid!="0"){//通过接口拿数据，默认带ID0
                    // zepto 跟 jQuery的获取不一样
                    var sel = document.getElementById("bid");
                    $('#brandName').attr('value', sel.options[sel.selectedIndex].text);
                }

                var sid = $('#sid').val();
                if(sid&&sid!="0"){//通过接口拿数据，默认带ID0
                    // zepto 跟 jQuery的获取不一样
                    var sel = document.getElementById("sid");
                    $('#serialName').attr('value', sel.options[sel.selectedIndex].text);
                }
                
                //获取省份的dom
                var shengNode = $('#areaParentTag_shi').find('option').not(function() {return !this.selected});
                var shiNode = $('#shi').find('option').not(function() {return !this.selected});

                var url = $("#applyform").attr("action") + "?clubId=" + clubId 
                    + "&truename=" + truename
                    + "&phone=" + phone
                    + "&gender=" + $("input[name='gender']:checked").val()
                    + "&cityName=" + shiNode.text() + "&cityId=" + shiNode.val()
                    + "&provinceName=" + shengNode.text() + "&provinceId=" + shengNode.val()
                    + "&serialId=" + sid
                    + "&serialName=" + $('#serialName').val()
                    + "&brandId=" + bid
                    + "&brandName=" + $('#brandName').val()
                    + "&_t=" + new Date().getTime();

                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    success: function(rs) {
                        showTips(rs.desc);
                        if (rs.status == 0) {
                            setTimeout(function() {
                                location.href = '${WAPROOT}/${myUrl}/';
                            }, 3005);
                        }
                    }
                });
            });
            
          	//车型查询三级联动初始
            relatedSelect(
            	{id:"bid",url:"http://price.pcauto.com.cn/interface/5_3/brand_json_chooser_v2.jsp",node:{root:"brands", value:"id", text:"text",custom:"id"},load:true},
            	{id:"sid",url:"http://price.pcauto.com.cn/interface/5_3/serial_json_chooser.jsp?brand=",node:{root:"firms", value:"id", text:"text",custom:"id"},load:false}
            );
        </script>
    </body>
</html>